<template>
	<view>
		<view class="cu-modal" :class="hasLogin==false?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">登录</view>
				</view>
				<view class="padding-xl">
					<form>
						<view class="cu-form-group margin-top">
							<view>账号</view>
							<input v-model="username" placeholder="请输入账号" name="input"></input>
						</view>
						<view class="cu-form-group">
							<view>密码</view>
							<input v-model="password" placeholder="请输入密码" type="password" name="input"></input>
						</view>
					</form>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn bg-green margin-left" @click="toLogin">登录</button>
						<button class="cu-btn bg-gray margin-left" @click="userCancel">取消</button>
					</view>
				</view>
			</view>
		</view>
		<JHome v-if="PageCur=='home'"></JHome>
		<JMessage v-if="PageCur=='message'"></JMessage>
		<JMine v-if="PageCur=='mine'"></JMine>
		<view class="cu-bar tabbar shadow bg-white foot">
			<view class="action" @click="NavChange" data-cur="home" :class="PageCur=='home'?'text-green':'text-gray'">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/index' + [PageCur=='home'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='home'?'text-blue':'text-gray'">首页</view>
			</view>
			<view class="action" @click="NavChange" data-cur="message" :class="PageCur=='message'?'text-green':'text-gray'">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/notice' + [PageCur=='message'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='message'?'text-blue':'text-gray'">通知</view>
			</view>
			<view class="action" @click="NavChange" data-cur="mine" :class="PageCur=='mine'?'text-green':'text-gray'">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/my' + [PageCur=='mine'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='mine'?'text-blue':'text-gray'">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	import DesUtils from '../../common/js/des.js'
	export default {
		data() {
		return {
				// 默认标签页
				PageCur: 'home',
				username:'',
				password:''
			}
		},
		mounted() {
			var that  = this;
			uni.getStorage({
				key: 'jeesite_user',
				success: function () {
				   // 开始自动登录
				   that.autoLogin();
				},
				fail: function(){
					// 登录失败
					that.loginFail();
				}
			});
		},
		computed:{
			// [是否登录]
			...mapState(["hasLogin", "secretKey"])
		},
		methods: {
			...mapMutations(["loginFail", "userCancel"]),
			...mapActions(["autoLogin"]),
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			},
			// 用户登录
			toLogin(){
				if(this.username == ""){
					uni.showToast({
						title: '账号不能为空',
						icon: "none"
					})
					return;
				}
				if(this.password == ""){
					uni.showToast({
						title: '密码不能为空',
						icon: "none"
					})
					return;
				}
				let username = DesUtils.encode(this.username, this.secretKey);
				let password = DesUtils.encode(this.password, this.secretKey);
				let userStorage = {username,password};
				let that = this;
				uni.setStorage({
					key: 'jeesite_user',
					data: userStorage,
					success: function () {
					   // 开始自动登录
					   that.autoLogin();
					},
					fail: function(){
						uni.showToast({
							title: 'uni.setStorage失败',
							icon: "none"
						})
					}
				});
			}
		}
	}
</script>

<style scoped>
</style>
